<template>
  <a-date-picker
    :disabled="disabled || readOnly"
    :placeholder="placeholder"
    @change="handleDateChange"
    :value="momVal"
    :showTime="showTime"
    :format="dateFormat"
    :getCalendarContainer="getCalendarContainer"
  />
</template>
<script setup>
import { ref, watch } from 'vue';
import moment from 'moment';

// 定义 props
const props = defineProps({
  placeholder: {
    type: String,
    default: '',
    required: false
  },
  value: {
    type: String,
    required: false
  },
  dateFormat: {
    type: String,
    default: 'YYYY-MM-DD',
    required: false
  },
  // 此属性可以被废弃了
  triggerChange: {
    type: Boolean,
    required: false,
    default: false
  },
  readOnly: {
    type: Boolean,
    required: false,
    default: false
  },
  disabled: {
    type: Boolean,
    required: false,
    default: false
  },
  showTime: {
    type: Boolean,
    required: false,
    default: false
  },
  getCalendarContainer: {
    type: Function,
    default: () => document.body
  }
});

// 定义 emits
const emit = defineEmits(['change']);

// 定义响应式数据
const momVal = ref(props.value ? moment(props.value, props.dateFormat) : null);

// 监听 props.value 变化
watch(() => props.value, (val) => {
  if (!val) {
    momVal.value = null;
  } else {
    momVal.value = moment(val, props.dateFormat);
  }
});

// 处理日期变化事件
const handleDateChange = (mom, dateStr) => {
  emit('change', dateStr);
};
</script>
